<template>
  <div id="safetyMin">
    <div class="outer-frame">
      <div class="outer-frame-l">
        <safety-l />
      </div>
      <div class="outer-frame-c">
        <safety-c />
      </div>
      <div class="outer-frame-r">
        <safety-r />
      </div>
    </div>
  </div>
</template>

<script>
import SafetyL from './safety-l'
import SafetyC from './safety-c'
import SafetyR from './safety-r'
export default {
  name: 'safetyMin',
  data() {
    return {
    };
  },
  components: { SafetyL , SafetyC , SafetyR },
  mounted() { },
  methods: { },
};
</script>

<style lang="scss" scoped>
#safetyMin{
  background-color: rgba($color: #000000, $alpha: 0)!important;
  height: 100%;
  .outer-frame{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
    .outer-frame-l,.outer-frame-r{
      width: 30%;
      height: 100%;
      // border: 1px solid red;
    }
    .outer-frame-c{
      width: 39%;
      height: 100%;
      // border: 1px solid gold;
    }
  }
}
</style>